<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    const userName = document.getElementById('userName')
    const message = document.getElementById('message')

    //调用防抖函数
    const debounceFn = debounce(function() {
        //针对接口进行防抖处理
        ajax.get('http://baidu.com', function(){})
    }, 1000)


    userName.addEventListener('input', function (){
        var str = checkUserName(userName.value)
        if (str === '该用户合法') {
            message.innerHTML = ''

            //调用防抖函数
            debounceFn()

            // ajax 请求，模拟异步操作
            // ajax.get('http://baidu.com', function(){})
            
        } else {
            message.innerHTML = str
        }
    })



        //创建防抖函数
        function debounce (func, wait) {  //函数内输入接收防抖函数和接收时间
            //声明变量并接收一个定时器
            var timer = null
            return function () {
                //判断定时器是否存在,不存在则清除定时器
                if (timer !== null) {
                    clearTimeout(timer)
                }
                timer = setTimeout(func, wait)
            }

        }

        //将正常的防抖改为箭头函数
        
    </script>
</body>
</html>